Slope Chart

Compares values between two points in time, visually representing the magnitude and direction of change. This provides a clear and concise visualization of the changes between two time periods. It is useful for tracking progress, identifying significant changes, and understanding the impact of interventions.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;
  
  const data = getDataFromSearchQuery();

  const ColumnField = "Year";
  const RowField1 = "Maker";
  const RowField2 = "Miles_per_Gallon";

  muze
    .canvas()
    .columns([ColumnField])
    .rows([
      [RowField1, RowField2],
      [RowField1, RowField2],
    ])
    .layers([
      {
        mark: "line",
        encoding: {
          color: {
            value: () => {
              return "#8DD3C7";
            },
          },
        },
      },
    ])
    .config({
      border: {
        showRowBorders: {
          top: false,
          bottom: false,
          left: false,
          right: false,
        },
        showColBorders: {
          top: false,
          bottom: false,
          left: false,
          right: false,
        },
        showValueBorders: {
          top: false,
          bottom: false,
          left: false,
          right: false,
        },
      },
      gridLines: {
        x: {
          show: false,
        },
        y: {
          show: false,
        },
      },
      axes: {
        x: {
          showAxisName: false,
          tickInterval: {
            step: ColumnField,
            multiplier: 10,
          },
        },
        y: {
          fields: {
            [RowField2]: {
              showAxisName: false,
            },
          },
        },
      },
    })
    .data(data)
    .mount("#chart"); // mount your chart